<template>
	<view class="work-container">
		<view class="tabs">
			<!-- 提现数据 -->
			<up-tabs lineWidth="100px" itemStyle="height:50px;" :scrollable="false" :list="tabList" @click="clickTab"
				activeStyle="color:rgb(0,122,255);fontSize:18px" inactiveStyle="color:#888;fontSize:16px"></up-tabs>
			<up-list @scrolltolower="scrolltolower" style="background-color: #eeebec;">
				<up-empty :iconSize="150" mode="list" text="当前暂无数据" v-if="list.length === 0"></up-empty>
				<up-list-item v-for="item in list" :key="item.id">
					<block>
						<view class="tasklist">
							<view class="task-orange">
								<view class="cu-bar bg-white solid-bottom margin-top">
									<view class="action">
										<view class="task_title"> {{ item.subAcctName }}</view>
									</view>
								</view>

								<view class="cu-bar bg-white solid-bottom">
									<view class="action">
										提现账号: {{ item.account }}
									</view>
								</view>
								<view class="cu-bar bg-white solid-bottom">
									<view class="action">
										提现账户：{{ item.takeCashAcctNo }}
									</view>
								</view>
								<view class="cu-bar bg-white solid-bottom">
									<view class="action">
										提现金额：{{ item.tranAmt }}
									</view>
								</view>
								<view v-if="item.respMsg" class="cu-bar bg-white solid-bottom">
									<view class="action">
										反馈信息：{{ item.txnReturnMsg }}
									</view>
								</view>
								<view class="cu-card article">
									<view class="cu-bar bg-white solid-bottom">
										<view class="action">
											更新时间：{{ item.updateTime }}
										</view>
										<view class="action" style="padding-right:10px">
											<view class="text_js">
												<text class="text-orange">{{ item.paystateshow }}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</up-list-item>
				<LoadMore :status="status" v-if="list.length !== 0"></LoadMore>
			</up-list>
		</view>
	</view>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import LoadMore from "@/components/LoadMore.vue"
import { getWithdrawalRecord } from '@/api/driver.js'

/* 数据 */
const uToastRef = ref(null)
// tab选项
const tabList = reactive([
	{
		name: '待处理',
		tranStatus: '5',
	},
	{
		name: '提现中',
		tranStatus: '6',
	},
	{
		name: '已提现',
		tranStatus: '0'
	},
	{
		name: '失败',
		tranStatus: '1'
	}
])
// 获取列表参数
const getListParams = reactive({
	currPage: 1,
	limit: 10,
	tranStatus: '5'
})
// 列表数据
const list = reactive([])
// 是否还有下一页
const hasNextPage = ref(false)
const status = ref('loadmore')


/* 方法 */
// 点击tab
const clickTab = async (item) => {
	getListParams.currPage = 1
	getListParams.tranStatus = item.tranStatus
	list.length = 0
	await getList(getListParams)
}
// 滚动到底部
const scrolltolower = async () => {
	if (hasNextPage.value) {
		status.value = "loading"
		let params = {
			...getListParams,
			currPage: getListParams.currPage + 1
		}
		await getList(params)
	} else {
		status.value = "nomore"
	}
}
// 获取列表数据
const getList = async (params) => {
	uToastRef.value.show({
		message: "正在获取记录",
		type: 'loading',
		duration: -1
	})
	let res = await getWithdrawalRecord(params)
	uToastRef.value.hide()
	if (res.success) {
		Object.assign(getListParams, params)
		list.push(...res.data.list)
		hasNextPage.value = res.data.hasNextPage
		if (hasNextPage.value) {
			status.value = 'loadmore'
		} else {
			status.value = 'nomore'
		}
	}
}
// 初始化封装
const init = async () => {
	await getList(getListParams)
}




/* 钩子 */
onMounted(async () => {
	await init()
})


</script>

<style lang="scss" scoped>
.Ima {
	text-align: center;
	margin-top: 110rpx;

	image {
		width: 320rpx;
	}

	view {
		margin-top: 21rpx;
		color: #999;
	}
}

.blue_btn {
	position: fixed;
	width: 64%;
	bottom: 20px;
	left: 18%;
	background-image:
		linear-gradient(to bottom, rgb(88, 193, 238), rgb(15, 171, 222));
	height: 45px;
	line-height: 45px;
	color: #fff;
	text-align: center;
	border-radius: 25px;
	font-size: 17px;
	box-shadow: 0 5px 10px rgba(88, 193, 238, 0.4);
	font-weight: bold;
	z-index: 3;
}

.tabs_title {
	display: flex;
	padding: 15rpx;
	font-size: 30rpx;
	background: #fff;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.title_item {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.active {
	color: #1890FF;
	padding: 5px 0;
}

.fz18 {
	font-size: 25rpx;
}

.text_js {
	position: relative;
	left: 20rpx;
}

.action {
	text-align: left;
}

.my-bar {
	overflow: hidden;
	padding: 20rpx 0 30rpx 0;
}

.my-bar .action {
	max-width: 100%;
	width: 21%;
	font-size: 30rpx;
	float: left;
	margin: 10rpx 0 10rpx 20rpx;
	align-items: center;
	height: 100%;
	display: block;
}

.my-bar .info {
	margin: 13rpx 30rpx 0 0;
	float: right;
	width: 72%;
	display: block;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/*任务列表页面样式*/
page {
	background: #f1f1f1;
}

.tasklist {
	border-radius: 10px;
	color: #666;
	margin: 0 15rpx 30rpx;
	background: #fff;
	/*border:1px solid #fff;*/
}

.task-orange {
	border-left: 4px solid #f37b1d;
	box-shadow: 5px 5px 5px #ddd;
	border-radius: 6px;
}

.task-green {
	border-left: 4px solid #39b54a;
	box-shadow: 5px 5px 5px #ddd;
	border-radius: 6px;
}

.task-blue {
	border-left: 4px solid #0081ff;
	box-shadow: 5px 5px 5px #ddd;
	border-radius: 6px;
}

.task-red {
	border-left: 4px solid #e54d42;
	box-shadow: 5px 5px 5px #ddd;
	border-radius: 6px;
}

.arrow {
	width: 14px;
	height: 14px;
}

.task_title {
	font-weight: 700;
}

.tasklist .cu-bar {
	min-height: 80rpx;
}
</style>
